<template>
  <section class="search">
    <HeaderTop title="搜索"></HeaderTop>
    <form class="search_form" @submit="search">
      <input type="search" name="search" placeholder="请输入商家或美食名称" class="search_input" v-model="placeholder" maxlength="10">
      <input type="submit" class="search_submit">
    </form>
    <div class="search-footer" v-for = "(shop,index) in searchShops" :key="index">
      <div class="left">
        <img src="../../../static/img/1612bca0ebf3396.png">
      </div>
      <div class="right">
        <p class="first">
          <span>品牌</span>
          <span>{{shop.name}}</span>
          <span v-for="(support,index) in shop.supports" :key="index">
            <span>{{support.icon_name}}</span>
          </span>
        </p>
        <p class="second">
          <span>
            <img src="../../components/star/images/stars/star24_half@2x.png">
          </span>
          <span>
            <img src="../../components/star/images/stars/star24_off@2x.png">
          </span>
          <span>
            <img src="../../components/star/images/stars/star24_off@2x.png">
          </span>
          <span>
            <img src="../../components/star/images/stars/star24_off@2x.png">
          </span>
          <span>
            <img src="../../components/star/images/stars/star24_off@2x.png">
          </span>
          <span>{{shop.rating}}</span>
          <span></span>
          <span>{{shop.delivery_mode.text}}</span>
        </p>
        <p class="last">
          {{shop.piecewise_agent_fee.tips}}
        </p>
      </div>
    </div>
  </section>
</template>

<script>
  import HeaderTop from "../../components/HeaderTop/HeaderTop.vue"
  import {mapActions, mapState} from 'vuex'
  export default {
    data () {
      return {
        placeholder: '',
      }
    },
    computed: {
      isPlaceholder () {
        /^1{10}$/.test(this.placeholder)
      },
      ...mapState(['searchShops'])
    },
    methods: {
      ...mapActions(['reqSearch']),
      search () {
        this.reqSearch()
      }
    },
    components: {
      HeaderTop
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../common/stylus/mixins.styl"
  .search  //搜索
    width 100%
    height 100%
    .header //头部公共css
      background-color #02a774
      position fixed
      z-index 100
      left 0
      top 0
      width 100%
      height 45px
      .header_search
        position absolute
        left 15px
        top 50%
        transform translateY(-50%)
        width 10%
        height 50%
        .iconfont
          font-size 22px
          color #fff
      .header_title
        position absolute
        top 50%
        left 50%
        transform translate(-50%, -50%)
        width 30%
        color #fff
        font-size 22px
        text-align center
    .search_form
      clearFix()
      margin-top 45px
      background-color #fff
      padding 12px 8px
      input
        height 35px
        padding 0 4px
        border-radius 2px
        font-weight bold
        outline none
        &.search_input
          float left
          width 79%
          border 4px solid #f2f2f2
          font-size 14px
          color #333
          background-color #f2f2f2
        &.search_submit
          float right
          width 18%
          border 4px solid #02a774
          font-size 16px
          color #fff
          background-color #02a774

    .search-footer
      height 100px
      .left
        width 100px
        height 100%
        float left
        img 
          width 100%
          height 100% 
      .right
        .first
          margin-top 5px
          span:nth-of-type(1)
            background-color:  #ffd930
            font-size 11px
          span:nth-of-type(2)
            font-size 14px
            margin 0 10px
            font-weight bold
          span:nth-of-type(3)
            font-size 11px
            margin 0 5px
          span:nth-of-type(4)
            font-size 11px
            margin 0 5px
          span:nth-of-type(5)
            font-size 11px
            margin 0 5px
        .second
          margin 25px 0
          img 
            width 10px
            height 10px
          span:nth-of-type(6)
            font-size 11px
          span:nth-of-type(7)
            font-size 11px
          span:nth-of-type(8)
            font-size 11px
            margin-left 90px 
            background-color #02a774
            border 1px #02a774
            color white
        .last
          font-size 11px
</style>
